import React, { useState } from "react"
import { Card, Form, Button, Image, Divider } from 'antd-mobile'
import { AddOutline, MinusOutline } from 'antd-mobile-icons'
import './index.css'

interface IProps {
    props: any
    onClick: any
}

const ProductInfoCard: React.FC<IProps> = ({ props, onClick }) => {
    const { goodsName, image, price, monthSell, id } = props
    const [sum, setSum] = useState<number>(0)
    const handlePlus = () => {
        setSum(sum + 1)
        onClick()
        let goodsInfo: any = JSON.parse(localStorage.getItem('goodsInfo') as string)
        goodsInfo && goodsInfo.push({goodsId: id, num: sum + 1, price: price})
        localStorage.setItem('goodsInfo', JSON.stringify(goodsInfo))
    }
    return (
        <>
            <Card
                style={{ borderRadius: 0 }}
            >
                <div className="product-card-content" style={{height: '100%'}}>
                    <div className="product-card-content-img"><Image style={{height: '100%', width: '100%'}} src={image} /></div>
                    <div className="product-card-content-info">
                        {goodsName} 月售{monthSell || 15}
                        <div style={{ marginTop: 10 }}>
                            ￥{price || 15}
                        </div>
                        <div>
                            <Button className="min-btn" shape='rounded' onClick={() => { sum !== 0 && setSum(sum - 1) }}><MinusOutline /></Button>
                            <span className="ml12">{sum}</span>
                            <Button className="add-btn" shape='rounded' color='primary' onClick={handlePlus}><AddOutline /></Button>
                        </div>
                    </div>
                </div>
                <Divider></Divider>
            </Card>
        </>
    )
}

export default ProductInfoCard